<template>
  <div>
    <el-row>
      <div class="approval-content">
          <span v-for="(item,index) in approvalSelectArray" :key="index">
             <el-select @change="commitApproval"
                        style="margin-right: 5px;width: 220px"
                        v-model="item.value"
                        filterable
                        clearable
                        placeholder="请选择审批人">
          <el-option
            v-for="(opt ,index2) in item.userList"
            :key="index2"
            :label="opt.name"
            :value="opt.id">
          </el-option>
        </el-select>
        <el-icon v-if="index !== 0" class="el-icon-delete plus-icon-del"
                 @click.native.prevent="deleteOpt(index)"></el-icon>
            ——>
        </span>
        <el-icon class="el-icon-circle-plus-outline plus-icon-add" @click.native.prevent="addApproval"></el-icon>
      </div>
    </el-row>
  </div>
</template>

<script>
  import {localStorage} from 'js/localStorage'
  
  export default {
    name: "Approve",
    data() {
      return {
        userList: [],
        approval: '',
        approvalSelectArray: [],
        initApprovalUserList: [],
      }
    }, methods: {
      getUserList() {
        let success = data => {
          if (data.code === 'OK') {
            this.initApprovalUserList = data.data;
            this.buildUserList();
          } else {
            this.$message.error(data.msg)
          }
        };
        this.api.getApproveUserList({userId: localStorage.get("userID")}, success);
      }, buildUserList() {
        this.userList = Object.assign({}, this.initApprovalUserList);
        ;
        this.approvalSelectArray.push({
          value: '',
          userList: this.userList
        });
        let hash = {};
        this.approvalSelectArray = this.approvalSelectArray.reduce(function (pre, next) {
          hash[next.value] ? '' : hash[next.value] = true && pre.push(next);
          return pre
        }, []);
        
      }, addApproval() {
        let len = this.approvalSelectArray.find(item => item.value === '');
        if (len) {
          this.tips.MessageModal('warning', '请选择审批人!');
          return;
        }
        if (this.approvalSelectArray.length < 2) {
          this.approvalSelectArray.push({
            value: '',
            userList: this.userList
          });
        } else {
          this.tips.MessageModal('warning', '至多选择2人审批!');
        }
      }, deleteOpt(index) {
        this.approvalSelectArray.splice(index, 1);
        this.commitApproval();
      }, commitApproval() {
        let valueArray = [];
        let len = this.approvalSelectArray.find(item => item.value === '');
        if (len) {
          this.tips.MessageModal('warning', '请选择审批人!');
          this.$emit('commitApproval', {
            type: 'error',
            msg: '请选择审批人!',
            valueArray: valueArray
          });
          return;
        }
        let hash = {};
        let selectArray = Object.values(Object.assign({}, this.approvalSelectArray));
        selectArray = selectArray.reduce(function (pre, next) {
          hash[next.value] ? '' : hash[next.value] = true && pre.push(next);
          return pre
        }, []);
        if (selectArray.length < this.approvalSelectArray.length) {
          this.tips.MessageModal('warning', '审批人不能重复!');
          this.$emit('commitApproval', {
            type: 'error',
            msg: '审批人不能重复!',
            valueArray: valueArray
          });
          return;
        }
        if (selectArray.length === 1) {
          if (selectArray[0].value === '') {
            this.tips.MessageModal('warning', '请选择审批人!');
            this.$emit('commitApproval', {
              type: 'error',
              msg: '请选择审批人!',
              valueArray: valueArray
            });
            return;
          }
        }
        this.approvalSelectArray.forEach(item => {
          valueArray.push(item.value);
        });
        this.$emit('commitApproval', {
          type: 'success',
          msg: '',
          valueArray: valueArray
        });
        
      },
    }, mounted() {
      this.getUserList();
    }, watch: {}
  }
</script>

<style type="less" scoped>
  .plus-icon-add {
    color: #67c23a;
    cursor: pointer;
    font-size: 16px
  }
  
  .approval-content {
    text-align: left;
  }
  
  .plus-icon-del {
    margin-right: 5px;
    color: #F1449D;
    cursor: pointer;
    font-size: 16px
  }
  
  .approval-dialog-modal {
    height: 450px !important;
  }
  
  .pur-order-dialog-tips {
    color: goldenrod;
    font-size: 12px;
    padding-left: 10px;
  }
</style>
